<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="评价管理"></uni-nav-bar>
		<view class="background"></view>
		<view class="content">
			<view class="top">
				<view class="" style="font-size: 26rpx;font-weight: bold;">
					张女士
				</view>
				<navigator url="/pacakgeBase/completedOrder/completedOrder" class="viewDetails">
					查看详情
				</navigator>
			</view>
			<view class="detailed-content">
				<view class="" style="color: #468BF9;margin-top: 20rpx;">
					订单编号：
					<span>123456789</span>
				</view>
				<view class="" style="margin: 20rpx 0;">
					综合评分：
					<span>3</span><span style="margin-right:10rpx;">分</span>
					<image style="width: 20rpx;height: 20rpx;margin: 0 5rpx;" src="/static/五星 拷贝 2@2x.png" mode="">
					</image>
					<image style="width: 20rpx;height: 20rpx;margin: 0 5rpx;" src="/static/五星 拷贝 2@2x.png" mode="">
					</image>
					<image style="width: 20rpx;height: 20rpx;margin: 0 5rpx;" src="/static/五星 拷贝 2@2x.png" mode="">
					</image>
				</view>
				<view class="evaluation-time">
					<view class="">
						评价时间：
						<span>2023-03-08 11：02</span>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view class="" style="font-size: 26rpx;font-weight: bold;">
					张女士
				</view>
				<navigator url="/pacakgeBase/completedOrder/completedOrder" class="viewDetails">
					查看详情
				</navigator>
			</view>
			<view class="detailed-content">
				<view class="" style="color: #468BF9;margin-top: 20rpx;">
					订单编号：
					<span>123456789</span>
				</view>
				<view class="" style="margin: 20rpx 0;">
					综合评分：
					<span>3</span><span style=" margin-right:10rpx;">分</span>
					<image style="width: 20rpx;height: 20rpx;margin: 0 5rpx;" src="/static/五星 拷贝 2@2x.png" mode="">
					</image>
					<image style="width: 20rpx;height: 20rpx;margin: 0 5rpx;" src="/static/五星 拷贝 2@2x.png" mode="">
					</image>
					<image style="width: 20rpx;height: 20rpx;margin: 0 5rpx;" src="/static/五星 拷贝 2@2x.png" mode="">
					</image>
				</view>
				<view class="evaluation-time">
					<view class="">
						评价时间：
						<span>2023-03-08 11：02</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 150rpx;
	}

	.content {
		top: -130rpx;
		padding: 20rpx;
		position: relative;
		width: 640rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		/* 使子元素两端对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		border-bottom: 8rpx solid #F7F7F7;
		padding-bottom: 20rpx;

	}

	.viewDetails {
		background-color: #3183FB;
		color: white;
		border-radius: 60rpx;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		width: 150rpx;
	}

	.evaluation-time {
		color: #858585;
	}
</style>